import AKeyAlarm from '@/assets/icons/AKeyAlarm';
import ClueReport from '@/assets/icons/ClueReport';
import ElectronicDocuments from '@/assets/icons/ElectronicDocuments';
import EvidenceUpload from '@/assets/icons/EvidenceUpload';
import HelpNearby from '@/assets/icons/HelpNearby';
import LegalOnline from '@/assets/icons/LegalOnline';
import Paramount from '@/assets/icons/Paramount';
import PoliceNetwork from '@/assets/icons/PoliceNetwork';
import SecurityGuard from '@/assets/icons/SecurityGuard';
import SecurityTutorial from '@/assets/icons/SecurityTutorial';
import { useNavigation } from '@react-navigation/native'
import { Bell, RefreshCw, Search } from 'lucide-react-native';
import { ScrollView, TextInput } from 'react-native';
import {Text, TouchableOpacity, View} from 'react-native-ui-lib';

import {SafeScreen } from '@/components/templates';


const serviceIcons = [
    { icon: <ElectronicDocuments />, id: 1, name: '电子证件', url: 'ElectronicDocuments' },
    { icon: <PoliceNetwork />, id: 2, name: '警务网点', url: 'PoliceNetwork' },
    { icon: <SecurityGuard />, id: 3, name: '安全守护', url: 'SecurityGuard' },
    { icon: <ClueReport />, id: 4, name: '线索举报', url: 'ClueReport' },
    { icon: <EvidenceUpload />, id: 5, name: '证据上传', url: 'EvidenceUpload' },
    { icon: <Paramount />, id: 6, name: '旁证博引', url: 'Paramount' },
    { icon: <SecurityTutorial />, id: 7, name: '安全教程', url: 'SecurityTutorial' },
    { icon: <LegalOnline />, id: 8, name: '法务在线', url: 'LegalOnline' },
];

// Mock notices
const notices = [
    {
        contact: '020-1234567',
        content:
        '依据《中华人民共和国刑事诉讼法》《公安机关办理刑事案件程序规定》，现公开协查以下违法犯罪嫌疑人...',
        date: '2025年2月20日',
        department: '广州市公安局海珠分局',
        id: 1,
        title: '协查通告',
    },
    {
        contact: '020-1234567',
        content:
        '依据《中华人民共和国刑事诉讼法》《公安机关办理刑事案件程序规定》，现公开协查以下违法犯罪嫌疑人...',
        date: '2025年2月18日',
        department: '广州市公安局海珠分局',
        id: 2,
        title: '协查通告',
    },
    {
        contact: '020-1234567',
        content:
        '依据《中华人民共和国刑事诉讼法》《公安机关办理刑事案件程序规定》，现公开协查以下违法犯罪嫌疑人...',
        date: '2025年2月18日',
        department: '广州市公安局海珠分局',
        id: 3,
        title: '协查通告',
    },
];

function HomePage() {
    const navigation = useNavigation();

    const handleServicePress = (url: string) => {
      if (url) {
        // @ts-expect-error - 忽略navigation类型错误，后续会通过正确配置解决
        navigation.navigate(url);
      }
    };

    return (
        <SafeScreen style={{padding: 0}}>
            <ScrollView contentContainerStyle={{paddingBottom: 16}} showsVerticalScrollIndicator={false}>
                {/* 蓝色背景区域 */}
                <View className="relative bg-[#4689FE] pb-8">
                    {/* 顶部导航栏 */}
                    <View className="flex-row items-center justify-between px-4 pt-2">
                        <View className="flex-row items-center">
                            <Text className="text-white font-medium mr-1">城市</Text>
                            <RefreshCw color="#fff" size={16} />
                        </View>

                        {/* 搜索框 */}
                        <View className="flex-1 mx-2 flex-row items-center rounded-full bg-blue-300 bg-opacity-40 px-3 py-1.5">
                            <Search color="#fff" size={16} />
                            <TextInput
                                className="flex-1 ml-2 text-sm text-white"
                                placeholder="请搜索内容"
                                placeholderTextColor="#fff"
                            />
                        </View>

                        <View className="flex-row items-center">
                            <Bell className="mr-1" color="#fff" size={20} />
                            <TouchableOpacity className="ml-1 h-7 w-7 items-center justify-center rounded-full bg-white">
                                <Text className="text-xl font-bold text-blue-500">+</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

                {/* 功能图标网格 - 白色卡片 */}
                <View className="mx-4 -mt-4 rounded-xl bg-white p-4 shadow">
                    <View className="flex-row flex-wrap">
                        {serviceIcons.map((item) => (
                            <TouchableOpacity
                                className="w-1/4 items-center mb-4"
                                key={item.id}
                                onPress={() => { handleServicePress(item.url); }}
                            >
                                {item.icon}
                                <Text className="text-center text-xs mt-1">{item.name}</Text>
                            </TouchableOpacity>
                        ))}
                    </View>
                </View>

                {/* 快捷操作按钮 */}
                <View className="mt-4 flex-row justify-between px-4">
                    {/* 附近求助按钮 */}
                    <TouchableOpacity
                        className="relative w-[48%] overflow-hidden rounded-xl"
                        onPress={() => { handleServicePress('HelpNearby'); }}
                    >
                        <HelpNearby />
                        <View className="absolute top-0 left-0 p-4">
                            <Text className="text-lg font-bold text-white">附近求助</Text>
                            <Text className="mt-1 text-xs text-white max-w-[100px]">一键向附近用户求助</Text>
                        </View>
                    </TouchableOpacity>

                    {/* 一键报警按钮 */}
                    <TouchableOpacity
                        className="relative w-[48%] overflow-hidden rounded-xl"
                        onPress={() => { handleServicePress('Alarm'); }}
                    >
                        <AKeyAlarm />
                        <View className="absolute top-0 left-0 p-4">
                            <Text className="text-lg font-bold text-white">一键报警1</Text>
                        </View>
                    </TouchableOpacity>
                </View>

                {/* 警务通告部分 */}
                <View className="mt-4 px-4">
                    <View className="flex-row items-center mb-2">
                        <View className="w-1 h-4 bg-blue-500 rounded-full mr-2" />
                        <Text className="text-base font-bold">警务通告</Text>
                    </View>

                    <ScrollView
                        contentContainerStyle={{paddingRight: 20}}
                        horizontal
                        showsHorizontalScrollIndicator={false}
                    >
                        {notices.map((notice) => (
                            <View
                                className="mr-3 h-[180px] w-[160px] rounded-lg bg-blue-800 p-4"
                                key={notice.id}
                            >
                                <View className="items-center justify-center mb-2">
                                    <View className="h-12 w-12 rounded-full border-2 border-white overflow-hidden">
                                        {/* 警察徽章图片可以放这里 */}
                                    </View>
                                </View>
                                <Text className="mb-2 text-center text-base font-bold text-white">{notice.title}</Text>
                                <Text className="text-xs text-white" numberOfLines={4}>{notice.content}</Text>
                                <View className="mt-auto">
                                    <Text className="text-[10px] text-white text-center">{notice.date}</Text>
                                    <Text className="text-[10px] text-white text-center">{notice.department}</Text>
                                </View>
                            </View>
                        ))}
                    </ScrollView>
                </View>
            </ScrollView>
        </SafeScreen>
    );
}

export default HomePage;
